<template>
  <div>

    <el-dialog
      title="添加子设备"
      :visible.sync="dialogVisible"
      width="80%"
      top="0"
    >
      <el-form labelWidth="150px">
        <el-form-item label="主设备名称">
          {{maineq.hash.ep_ename}}
        </el-form-item>
        <el-form-item label="主设备管理编号">
          {{maineq.hash.managenum}}
        </el-form-item>
        <el-form-item label="分类" class="is-required">
          <el-select v-model="neweqData.ep_type" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in eqtypeArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.neweqData.ep_type.required">
            请选择分类
          </div>
        </el-form-item>
        <el-form-item label="设备名称" class="is-required">
          <el-input v-model="neweqData.ep_ename"></el-input>
          <div class="el-form-item__error" v-if="!$v.neweqData.ep_ename.required">
            请输入设备名称
          </div>
        </el-form-item>
        <el-form-item label="管理编号" class="is-required">
          <el-input v-model="neweqData.managenum"></el-input>
          <div class="el-form-item__error" v-if="!$v.neweqData.managenum.required">
            请输入管理编号
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.managenum.alphaNum">
            管理编号格式有误
          </div> -->
        </el-form-item>
        <el-form-item label="所属部门">
          <selectorg @getselectorgid="getselectorgid" :itemorgid="neweqData.orgid" :isdept="true"></selectorg>
          <div class="el-form-item__error" v-if="!$v.neweqData.orgid.required">
            请输入所属部门
          </div>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="neweqData.scale"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.scale.required">
            请输入规格型号
          </div>
          <div class="el-form-item__error" v-if="!$v.neweqData.scale.alphaNum">
            规格型号格式有误
          </div> -->
        </el-form-item>
        <el-form-item label="测量范围">
          <div class="ql-container">
            <quill-editor ref="myTextEditor"
              v-model="neweqData.range"
              class="editor"
              :options="editorOption"
            >
            </quill-editor>
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.range.required">
            请输入测量范围
          </div> -->
          <!-- <el-input v-model="neweqData.range"></el-input> -->
        </el-form-item>
        <el-form-item label="精准度等级">
          <quill-editor ref="myTextEditor2"
            v-model="neweqData.accuracy"
            class="editor"
            :options="editorOption"
          >
          </quill-editor>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.accuracy.required">
            请输入精准度等级
          </div> -->
          <!-- <el-input v-model="neweqData.accuracy"></el-input> -->
        </el-form-item>
        <el-form-item label="出厂编号">
          <el-input v-model="neweqData.factory_num"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.factory_num.required">
            请输入出厂编号
          </div>
          <div class="el-form-item__error" v-if="!$v.neweqData.factory_num.alphaNum">
            出厂编号格式有误
          </div> -->
        </el-form-item>
        <el-form-item label="购置日期">
          <el-date-picker
            v-model="neweqData.bytime"
            type="date"
            valueFormat="yyyy-MM-dd"
            style="width:100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.bytime.required">
            请选择购置日期
          </div> -->
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="neweqData.factory"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.factory.required">
            请输入生产厂家
          </div> -->
        </el-form-item>

        <el-form-item label="溯源方式">
          <el-input v-model="neweqData.traceability"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.traceability.required">
            请输入溯源方式
          </div> -->
        </el-form-item>

        <el-form-item label="放置地点">
          <el-input v-model="neweqData.location"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.location.required">
            请输入放置地点
          </div> -->
        </el-form-item>

        <el-form-item label="检定/校准单位">
          <el-input v-model="neweqData.verifiy_company"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.verifiy_company.required">
            请输入检定/校准单位
          </div> -->
        </el-form-item>
        <!-- <el-form-item label="检测项目">
          <el-input v-model="neweqData.verifiy_project"></el-input>
          <div class="el-form-item__error" v-if="!$v.neweqData.verifiy_project.required">
            请输入检测项目
          </div>
        </el-form-item> -->
        <!-- <el-form-item label="检定参数">
          <el-input v-model="neweqData.verifiy_param"></el-input>
          <div class="el-form-item__error" v-if="!$v.neweqData.verifiy_param.required">
            请输入检定参数
          </div>
        </el-form-item> -->
        <el-form-item label="本次检定/校准日期">
          <el-date-picker
            valueFormat="yyyy-MM-dd"
            v-model="neweqData.verifiytime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.verifiytime.required">
            请选择本次检定/校准日期
          </div> -->
        </el-form-item>

        <el-form-item label="检定/校准周期">
          <el-select v-model="neweqData.verifiy_round" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in roundArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.verifiy_round.required">
            请选择检定/校准周期
          </div> -->
        </el-form-item>


        <el-form-item label="期间核查次数">
          <el-input v-model="neweqData.period_times"></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.period_times.required">
            请输入期间核查次数
          </div> -->
          <div class="el-form-item__error" v-if="!$v.neweqData.period_times.numeric">
            期间核查次数格式有误
          </div>
        </el-form-item>
        <!-- <el-form-item label="使用人">
          <el-select v-model="syridid" multiple placeholder="请选择" style="width:100%"
            clearable
          >
            <el-option
              v-for="item in jbrList"
              :key="item.value"
              :label="item.hash.username"
              :value="item.hash.pid"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.syridid.required">
            请选择使用人
          </div>
        </el-form-item> -->


        <el-form-item label="负责人">
          <searchperson @getpersonid="getpersonid" :itempersonid="neweqData.charger"></searchperson>
          <!-- <el-select v-model="neweqData.charger" placeholder="请选择" style="width:100%"
            clearable
          >
            <el-option
              v-for="item in jbrList"
              :key="item.value"
              :label="item.hash.username"
              :value="item.hash.pid"
            ></el-option>
          </el-select> -->
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.charger.required">
            请选择负责人
          </div> -->
        </el-form-item>


        <el-form-item label="设备照片">
          <upload2 :filelimit="1" :filelink.sync="filearr1" :isedit="false" :ispic="true"
            v-if="isreload1"
          ></upload2>
        </el-form-item>
        <el-form-item label="附件">
          <upload2 :filelimit="10" :filelink.sync="filearr2" :isedit="false" :ispic="false"
            v-if="isreload2"
          ></upload2>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="neweqData.remark"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="neweqData.status" border :textColor="'#fff'" :fill="fillcolor">
            <el-radio-button :label="item.hash.code_id" v-for="(item, index) in statusArr" :key="index">{{item.hash.code_name}}</el-radio-button>
          </el-radio-group>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.status.required">
            请选择状态
          </div> -->
        </el-form-item>
        <el-form-item label="使用人">
          <el-button type="primary" size="mini" @click="newsyr">添加使用人</el-button>

        </el-form-item>
        <el-form-item>
          <div>&nbsp;</div>
        </el-form-item>
        <el-table
          :data="syrList"
          stripe
          style="width: 94%;margin:0 auto"
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="hash.username" label="姓名"></el-table-column>
          <el-table-column prop="hash.verifiy_project" label="检测项目"></el-table-column>
          <el-table-column label="量值">
            <template slot-scope="scope">
              <div v-html="scope.row.hash.measurement">
                {{scope.row.hash.measurement}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="editsyr(scope.row)" type="primary" size="small">修改</el-button>
              <el-button size="small" type="danger" @click="deletesyr(scope)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

      </el-form>
      <el-dialog
        width="50%"
        :title="syrtitle"
        :visible.sync="innerVisible"
        appendToBody
      >

        <el-form labelWidth="150px">
          <el-form-item label="使用人" style="width:100%">
            <searchperson @getpersonid="getpersonid2" :itempersonid="''" v-if="issearchperson33"></searchperson>
            <!-- <el-select v-model="newsyrdata.hash.pid" placeholder="请选择" style="width:100%"
              clearable
              @change="changesyr"
            >
              <el-option
                v-for="item in jbrList"
                :key="item.value"
                :label="item.hash.username"
                :value="item.hash.pid"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="检测项目" style="width:100%">
            <el-input v-model="newsyrdata.hash.verifiy_project"></el-input>
          </el-form-item>
          <el-form-item label="量值" style="width:100%">
            <quill-editor ref="myTextEditor"
              v-model="newsyrdata.hash.measurement"
              class="editor"
              :options="editorOption"
            >
            </quill-editor>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="innerVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="donewsyr" v-if="syrtitle=='新增使用人'">确 定</el-button>
          <el-button size="mini" type="primary" @click="doeditsyr" v-else>保 存</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitneweq">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import upload2 from '~/components/common/upload2.vue';
import searchperson from '~/components/common/searchperson.vue';
import selectorg from '~/components/common/selectorg.vue';
import { required, alphaNum, numeric } from 'vuelidate/lib/validators';
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  // [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }],
  // [{ size: ['small', false, 'large', 'huge'] }],
  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // [{ font: [] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['clean'],
];
export default {
  validations: {
    // syridid: {
    //   required,
    // },
    neweqData: {
      ep_type: {
        required,
      },
      // location: {
      //   required,
      // },
      ep_ename: {
        required,
      },
      managenum: {
        required,
      },
      orgid: {
        required,
      },
      // scale: {
      //   required,
      //   alphaNum,
      // },
      // range: {
      //   required,
      // },
      // accuracy: {
      //   required,
      // },
      // factory_num: {
      //   required,
      //   alphaNum,
      // },
      // bytime: {
      //   required,
      // },
      // factory: {
      //   required,
      // },
      // traceability: {
      //   required,
      // },
      // verifiy_company: {
      //   required,
      // },
      // verifiy_project: {
      //   required,
      // },
      // verifiy_param: {
      //   required,
      // },
      // verifiytime: {
      //   required,
      // },
      // verifiy_round: {
      //   required,
      // },
      period_times: {
        numeric,
      },
      // charger: {
      //   required,
      // },
      // status: {
      //   required,
      // },
    },
  },
  data() {
    return {
      ts: this.newStore(),
      dialogVisible: true,
      innerVisible: false,
      neweqData: {
        period_times: '0',
        ep_type: '',
        orgid: '',
      },
      issearchperson33: true,
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
          },
        },
      },
      newsyrdata: {
        hash: {
          username: '',
          pid: '',
          charger: '',

        },
      },
      syrtitle: '新增使用人',
      syrList: [],
      isreload1: true,
      isreload2: true,
      eqtypeArr: [],
      filearr1: [],
      filearr2: [],
      roundArr: [],
      jbrList: [],
      radio1: '',
      syridid: [],
      statusArr: [],
    };
  },
  props: {
    maineq: Object,
    eqtype: String,
  },
  components: {
    upload2,
    searchperson,
    selectorg,
  },
  computed: {
    fillcolor() {
      let a;
      if (this.neweqData.status == '040301') {
        a = '#333';
      } else if (this.neweqData.status == '040302') {
        a = '#cb0000';
      } else if (this.neweqData.status == '040303') {
        a = '#0e90d2';
      } else if (this.neweqData.status == '040304') {
        a = '#5bb75b';
      } else {
        a = '#ec971f';
      }
      return a;
    },
  },
  created() {
    this.getjbrList();
    this.getcodeData('0402', '04', 'eqtypeArr');
    this.getcodeData('0401', '04', 'roundArr');
    this.getcodeData('0403', '04', 'statusArr');
  },
  mounted() {
    this.neweqData.ep_type = this.eqtype;
  },
  methods: {
    newsyr() {
      this.syrtitle = '新增使用人';
      this.newsyrdata = {
        hash: {
          pid: '',
          username: '',
        },
      };
      this.issearchperson33 = false;
      this.$nextTick(() => {
        this.issearchperson33 = true;
      });
      this.innerVisible = true;
    },
    editsyr(item) {
      this.syrtitle = '修改使用人';
      this.newsyrdata = item;
      this.innerVisible = true;
    },
    doeditsyr() {
      this.innerVisible = false;
    },
    getselectorgid(val) {
      this.neweqData.orgid = val;
    },
    deletesyr(item) {
      this.$confirm('确认删除使用人?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.syrList.splice(item.$index, 1);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    changesyr(val) {
      for (let i = 0; i < this.jbrList.length; i += 1) {
        if (val == this.jbrList[i].hash.pid) {
          this.newsyrdata.hash.username = this.jbrList[i].hash.username;
        }
      }
    },
    donewsyr() {
      if (this.newsyrdata.hash.pid == '') {
        this.$message({
          type: 'error',
          message: '请选择使用人',
        });
      }
      this.syrList.push(this.newsyrdata);
      this.innerVisible = false;
    },
    reload1() {
      this.isreload2 = false;
      this.$nextTick(() => {
        this.isreload2 = true;
      });
    },
    reload2() {
      this.isreload2 = false;
      this.$nextTick(() => {
        this.isreload2 = true;
      });
    },
    // 获取负责人
    getpersonid(val) {
      this.neweqData.charger = val.id;
    },
    getpersonid2(val) {
      console.log(val);
      this.newsyrdata.hash.pid = val.id;
      this.newsyrdata.hash.username = val.value;
    },
    // 提交添加设备
    submitneweq() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        this.$confirm('确认新增子设备?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = this.neweqData;
            req.handle = 'DD5D108B99FC12B72DC0B97F927BBE3D6FABA15BF8D746F0BFF0B9210751F692';
            if (this.filearr1.length > 0) {
              req.equ_photo = this.filearr1[0].url;
            } else {
              req.equ_photo = '';
            }
            req.supeid = this.maineq.hash.id;
            req.fileurl = this.posturl(this.filearr2);
            req.filename = this.postname(this.filearr2);
            req.syrid = [];
            req.verifiy_project = [];
            req.measurement = [];
            for (let i = 0; i < this.syrList.length; i += 1) {
              req.syrid.push(this.syrList[i].hash.pid);
              req.verifiy_project.push(this.syrList[i].hash.verifiy_project);
              req.measurement.push(this.syrList[i].hash.measurement);
            }
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '新增成功',
              });
              this.$parent.geteqlist();
              this.dialogVisible = false;
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    // 获取经办人列表
    getjbrList() {
      this.jbrList = [];
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jbrList = ts.d.data.operation1;
      });
    },
  },

};
</script>


<style scoped>
.quill-editor{
  height: auto;
}
.el-form-item {
    width: 50%;
    margin-bottom: 22px;
    float: left;
}
.statusspan{
  display: inline-block;
  width: 30px;
  height: 30px;

}
</style>
